// 生成主题样式
@mixin generate-theme($theme-map) {
  @each $key, $value in $theme-map {
    --#{$key}: #{$value};
  }
}

// 亮色主题
[data-theme='light'] {
  --primary-color: #409EFF;
  --bg-color: #f0f2f5;
  --text-color: #303133;
  --text-color-secondary: #909399;
  --border-color: #DCDFE6;
  --header-bg: #ffffff;
  --sidebar-bg: #304156;
}

// 暗色主题
[data-theme='dark'] {
  --primary-color: #409EFF;
  --bg-color: #1f1f1f;
  --text-color: #ffffff;
  --text-color-secondary: #909399;
  --border-color: #434343;
  --header-bg: #141414;
  --sidebar-bg: #000000;
}

// 使用主题变量的通用样式
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.header {
  background-color: var(--header-bg);
}

.sidebar {
  background-color: var(--sidebar-bg);
} 